<script>
import axios from "axios";

export default {
  name: "Publish",
  data() {
    return {
      article: {},
      dialogVisible: false,
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {}
    }
  },
  methods: {
    imgAdd(pos, $file) {
      let $vm = this.$refs.md;
      let formData = new FormData();
      formData.append('file', $file);
      axios({
        url:  this.baseUrl+'/file/upload',
        method: 'post',
        data: formData,
        headers: {'Content-Type': 'multipart/form-data'}
      }).then((res) => {
        console.log(res);
        $vm.$img2Url(pos, res.data.data);
      })
    },
    handleSave() {
      if (!this.user) {
        this.$message({
          type: "warning",
          message: "请登录后操作",
          center:true
        })
        return;
      }
      if (this.article.title == null) {
        this.$message.error('请输入文章标题')
      } else {
        this.dialogVisible = true;
      }
    },
    save() {

      this.request.post("/article/save", this.article).then(res => {
        if (res.code === 200) {
          this.$router.push("/front/article");
          this.dialogVisible = false;
          this.$message({
            type: 'success',
            message: '文章保存成功',
            center: true
          })
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
            center: true
          })
        }
      })
    }
  }
}
</script>

<template>
  <div>
    <div style="margin-bottom:10px">
      <el-input placeholder="请输入文章标题" v-model="article.title"
                size="medium" style="font-weight:bold;font-size: 30px"></el-input>
      <el-divider></el-divider>
    </div>
    <mavon-editor ref="md" style="height: 580px" v-model="article.content" :ishljs="true"
                  @imgAdd="imgAdd"></mavon-editor>
    <div style="text-align: right;margin-top: 20px">
      <el-button type="primary" size="medium" round @click="handleSave">发表文章</el-button>
    </div>
    <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="20%">
      <span>你确定要发表这篇文章吗</span>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="save">确 定</el-button>
  </span>
    </el-dialog>
  </div>

</template>

<style scoped>
/deep/ .el-input__inner {
  border: none;
  background-color: rgba(255, 255, 255, 0);
}
</style>
